<template>
	<div>
		<el-form :model="form" :rules="rules" ref="fromref" class="form-box"
			style="width: 50%;height: 600px;margin-top: auto;">
			<h3 style="color: #606266;">用户注册</h3>
			<!-- 账号 -->
			<el-form-item label="账号" prop="username">
				<el-input placeholder="请输入账号" v-model="form.username" prefix-icon="el-icon-coordinate"></el-input>
			</el-form-item>
			<!-- 密码 -->
			<el-form-item label="密码" prop="password">
				<el-input type='password' placeholder="请输入密码" v-model="form.password" prefix-icon="el-icon-lock"></el-input>
			</el-form-item>

			<!-- 手机号 -->
			<el-form-item label="手机号" prop="phoneNumber">
				<el-input placeholder="请输入手机号" v-model="form.phoneNumber" prefix-icon="el-icon-magic-stick"></el-input>
			</el-form-item>

			<!-- 验证码 -->
			<el-form-item label="验证码" prop="yanZhengUser">
				<el-input style="width: 78%;" placeholder="请输入验证码" v-model="form.yanZhengUser"  prefix-icon="el-icon-magic-stick"></el-input>
				<el-button type="info" style="background-color: #C2E7B0;" @click="getRandom()">获取验证码</el-button>
			</el-form-item>

			<el-form-item>
					<el-button @click="resetForm('Form')">重置</el-button>
					<el-button type="primary" @click="submitForm('from')"
						style="width: 100px;margin-bottom: 10px;">注册</el-button>
					<el-button type="primary" @click="welcome()">返回主页面</el-button>
					
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			
			var vusername = (rule, value, callback) => {
			  if (value === '') {
			    this.$message({
			              showClose: true,
			              message: '错了哦，帐号不能为空！',
			              type: 'error'
			            });
			  } else {
			    this.queryUserByUserName(),
			    callback();
			  }
			};
			var vpassword = (rule, value, callback) => {
			  if (value === '') {
			    this.$message({
			              showClose: true,
			              message: '错了哦，密码不能为空！',
			              type: 'error'
			            });
			  }  else {
				  this.passwordIsNull=false
			    callback();
			  }
			  };
			  var vphoneNumber = (rule, value, callback) => {
			    if (value === '') {
			      this.$message({
			                showClose: true,
			                message: '错了哦，手机号不能为空！',
			                type: 'error'
			              });
			    }  else {
					this.queryUserByUserPhone()
			      callback();
			    }
			    };
			return {
				nameIsNull: true,
				phoneIsNull: true,
				passwordIsNull: true,
				form: {
					username: '',
					password: '',
					phoneNumber: '',
					yanZhengUser: '',
					resYanZheng: 0
				},
				rules: {
					username: [
						{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
						{ validator: vusername, trigger: 'blur' }
					],
					password: [
						{ validator: vpassword, trigger: 'blur' },
						{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
					],
					phoneNumber: [
						{ min: 11, max: 11, message: '长度是11个字符', trigger: 'blur' },
						{ validator: vphoneNumber, trigger: 'blur' }
					],
					yanZhengUser: [
						{ required: true, message: '验证码不能为空', trigger: 'blur' },
						{ min: 6, max: 6, message: '长度为一串6位数字', trigger: 'blur' }
					]
				}
			}
		},
		methods:{
			async queryUserByUserPhone(){
				var param = new URLSearchParams();
				param.append("phone",this.form.phoneNumber)
				var res =await this.$http.post("queryUserByUserPhone",param);
				if(res.data.code!=200){
					this.$message.error(res.data.message)
				} else {
					this.phoneIsNull = false
					this.$message.success(res.data.message)
				}
			},
			//首页
			  welcome() {
			  	this.$router.push('/welcome')
			  },
			async queryUserByUserName(){
				var param = new URLSearchParams();
				param.append("name",this.form.username)
				var res =await this.$http.post("queryUserByUserName",param);
				if(res.data.code!=200){
					this.$message.error('欢迎注册！')
				} else {
					this.nameIsNull = false
					this.$message.success(res.data.message)
				}
			},
			async getRandom(){
				var param = new URLSearchParams();
				param.append("phone",this.form.phoneNumber)
				var resRandom =await this.$http.post("yanZhengPhone",param);
				this.resYanZheng = resRandom.data.data
				console.log(this.resYanZheng)
			},
			async submitForm(formName){
				if(this.form.username!=''&&this.form.password!=''&&this.form.phoneNumber!=''&&this.form.yanZhengUser!=''&&this.nameIsNull == false&&this.phoneIsNull == false){
					//使用axios来请求后端的vueLogin请求
					var param = new URLSearchParams();
					param.append("name",this.form.username);
					param.append("password",this.form.password);
					param.append("phone",this.form.phoneNumber)
					if(this.resYanZheng == this.form.yanZhengUser){
						var res =await this.$http.post("insertUser",param);
						console.log(res.data)
						if(res.data.code!=200){
							this.$message.error(res.data.message)
						} else {
							this.$message.success(res.data.message)
							this.$router.push('/login')
						}
					} else {
						this.$message.error('验证码错误,请重新输入！！！')
						return false;
					}
				}else{
					this.$message.error('数据格式错误,请输入完整！！！')
					return false;
				}
				
			},
			resetForm(formName) {
			  this.$refs[formName].resetFields();
			}
		}
	}
</script>

<style>

</style>
